.v-card{
    backdrop-filter: blur(var(--leleo-blur));
    border-radius: 5%;
    color: var(--leleo-vcard-color);
}

.vapp-fullscreen-background {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    
    .floating-switch-container {
        position: fixed;
        right: 0;
        z-index: 99;
      }
      
    .floating-switch {
        transform: translateX(53%); /* 初始状态下隐藏大部分 */
        transition: transform 0.3s ease;
    }
    
    .floating-switch:hover {
        transform: translateX(0); /* 悬停时完全展开 */
    }
    /* 调整视频元素的样式，使其全屏作为背景 */
    .video-bg {
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: -100;
        /* 居中 */
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: auto;
        background-clip: padding-box;
        filter: brightness(var(--leleo-brightness));
    }
    .loading{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%; 
        height: 100%; 
        background-color: #282c34;
        z-index: 9999;
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }
    .fade-enter-active, .fade-leave-active { 
        transition: opacity .8s
      }
    .fade-enter, .fade-leave-to { 
        opacity: 0  
    }

    .leleo-left{
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        &-welcome{
            margin-top: 10px;
            width: 100%;
            color: var(--leleo-welcomtitle-color);
            padding: 0 2rem;
            font-family: "myfont";
        }
        &-avatar{
            .musicplayer{
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
            }
            .musicplayer-text{
                position: absolute;
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
            }
            .leleo-spin {
                animation: spin 6s linear infinite;
            }
            .loading-spinner {
                position: absolute;
                 top: 50%;
                left: 50%;
                 transform: translate(-50%, -50%); 
                z-index: 1; 
            }
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .fade-in {
                animation: fadeIn .6s ease ;
              }
              
            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
        }
        &-socialIconsContainer{
            .leleo-social-bticon:hover{
                transform: scale(1.2);
            }
        }
    }
    .clock-font{
        font-family: "digitalfont";
        font-weight: 800;
    }
}
  
/* 添加一个::before伪元素降低背景图片的亮度，而不会影响background元素的其他内容 */
.vapp-fullscreen-background::before {
    content: "";
    background-image: var(--leleo-background-image-url); 
    transition: background-image 0.8s ease;
    background-size:cover;
    background-position: center;
    position: absolute;   
    width: 100%;
    height: 100%;
    z-index: -1;
    /* 调整亮度值  */
    filter: brightness(var(--leleo-brightness));
}
